<!--
 * @description: 
 * @Date: 2022-12-16 17:07:33
 * @example: 
 * @params: 
-->
<template>
  <div class="Container">
    <HeaderTopVue/>
   
    <div class="photoContainer">
       <div class="title">Photos</div>
        <div class="serach_photos">
         <div class="start">
            <span>Start Time</span>
            <DatePicker type="date" placeholder="Start Time" v-model="Startime"></DatePicker>
         </div>
         <div class="end">
            <span>End Time</span>
            <DatePicker type="date" placeholder="Start Time" v-model="Endtime"></DatePicker>
         </div>
        </div>
        <div class="images">
          <Button type="primary" class="btn">上传图片</Button>
          <div class="left">
        <Timeline>
        <TimelineItem>
            <p class="time">1976-12-16</p>
            <div class="content">
                <div class="card_img">
                  <img src="../assets/avatar.png" alt="">
                </div>
              </div>
        </TimelineItem>
        <TimelineItem>
            <p class="time">1976-12-16</p>
            <div class="content">
                <div class="card_img">
                  <img src="../assets/avatar.png" alt="">
                </div>
              </div>
        </TimelineItem>
    </Timeline>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import HeaderTopVue from '@/components/HeaderTop.vue';
export default {
  data() {
    return {
      Startime:"",
      Endtime:""
    }
  },
  mounted(){

  },
  computed:{

  },
  components:{
    HeaderTopVue
  },
  methods:{

  },
}
</script>
<style lang="less" scoped>
.Container{
.photoContainer{
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
height: 100%;
background-color: #0f0f29;
padding: 20px;
.title{
  font-size: 22px;
  color: #fff;
}
.serach_photos{
  height: 80px !important;
  box-sizing: border-box;
  background-color: #141437;
  border-radius: 15px;
  padding: 10px;
  display: flex;
  align-items: center;

.end {
  margin-left: 20px;

  span{
    margin-right: 20px;
  }
}
.start{
  span{
    margin-right: 20px;
  }
}
}
.images{
  height: 900px !important;
  margin-top: 20px;
  background-color: #141437;
  border-radius: 15px;
  padding: 10px;
  .btn {
    position: absolute;
    right:50px;
  }
  .time{
    font-size: 16px;
    font-weight:bold;
    color: #fff;
  }
  .content{
    margin-left: 10px;
    margin-top: 5px;
    .card_img{
      width: 250px;
      height: 250px;
      background: #212149;
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 20px;
      }
    }
  }
}
}

}
::v-deep .ivu-timeline-item-tail {
  border-left: 1px solid #7033ff !important;
}
::v-deep .ivu-timeline-item-head {
  // width: 20px !important;
  // height: 20px !important;
  background-color: #7033ff !important;
  border: none !important;
}

</style>
